export default {
  name: 'IconButton',

  props: {
    icon: String,

    activated: { default: true },

    width: { default: 20 },
    height: { default: 20 },
  },

  computed: {
    iconClass() {
      return 'icon-' + this.icon
    },

    style() {
      return {
        width: this.width + 'px',
        height: this.height + 'px',
      }
    },
  },

  render(h) {
    return (
      <button class="btn-icon" style={this.style}>
        <svg-icon class="svg-icon--btn" icon-class={this.iconClass}></svg-icon>
        <svg-icon
          class="svg-icon--btn svg-icon--btn_active"
          icon-class={this.activated ? `${this.iconClass}_active` : this.iconClass}
        ></svg-icon>
      </button>
    )
  },
}
